<template>
  <div class="hello">
    <div class="conter">
      <ul>
        <li
          v-for="item in renderlist"
          :key="item.id"
          :class="{ active: false }"
        >
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    list: Array,
  },
  computed: {
    renderlist() {
      let ary = this.list.map((item, index) => {
        switch (index) {
          case 3:
            return {
              ...this.list[7],
              index: 7,
            };
          case 4:
            return {
              ...this.list[3],
              index: 3,
            };
          case 3:
            return {
              ...this.list[7],
              index: 7,
            };
          case 5:
            return {
              ...this.list[6],
              index: 6,
            };
          case 6:
            return {
              ...this.list[5],
              index: 5,
            };

          case 7:
            return {
              ...this.list[4],
              index: 4,
            };

          default:
            return {
              ...item,
              index: index,
            };
            break;
        }
      });
      return ary
        .slice(0, 4)
        .concat({ id: "btn", text: "开始抽奖" })
        .concat(ary.slice(4));
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.conter {
  width: 80vw;
  height: 80vw;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  li {
    width: 25vw;
    height: 25vw;
    background: #eee;
  }
  li .active {
    background-color: rgb(233, 159, 159);
  }
}
</style>
